<template>
  <div class="order-detail">
    <!-- 电影票凭证 -->
    <div class="order-card">
      <div class="card-box">
        <!-- 路由跳转 -->
        <van-cell :title="CinemaName" is-link to="index" />
        <!-- 座位日期信息 -->
        <div class="card-detail">
          <div class="movie-name">{{ MovieName }}</div>
          <!-- 电影时间和语言 -->
          <div class="movie-tl">
            {{ getDate(startTime, endTime) }}
            （{{ MovieLan }}）
          </div>
          <!-- 电影院位置 -->
          <div class="cinema-seat">
            {{ CinemaSeat }}
          </div>
          <!-- 两个半圆 -->
          <div class="left-circle circle"></div>
          <div class="right-circle circle"></div>
        </div>
        <!-- 二维码 -->
        <div class="ewm-box">
          <img :src="`http://10.41.154.18:3000/sys/qrcode?text=${orderId}`" alt="" />
        </div>
      </div>
    </div>
    <!-- 电影票订单号和总价 -->
    <div class="order-middle">
      <div class="om">猫眼订单号：{{ OrderNumber }}</div>
      <div class="om">总价：{{ OrderPrice }}元</div>
    </div>
    <!-- 电影院位置信息 -->
    <div class="cinema-bottom">
      <div class="cinema-place">
        <div class="sandian cinema-name">{{ CinemaName }}</div>
        <div class="sandian cinema-address">{{ CinemaAdress }}</div>
      </div>
      <div class="icon-phone">
        <van-icon name="phone-o" />
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderDetail } from "../../api/OrderDetail"
export default {
  props: ["id"],
  data() {
    return {
      CinemaName: "",
      MovieName: "",
      // MovieTime: "2021年07月11日14:30-16:39",
      MovieLan: "",
      CinemaSeat: "",
      OrderNumber: "",
      OrderPrice: "",
      CinemaAdress: "",
      startTime: "",
      endTime: ""
    }
  },
  created() {
    this.getOrderDetail()
  },
  methods: {
    async getOrderDetail() {
      const res = await getOrderDetail(this.id)
      console.log(res.data.data.order)
      this.CinemaName = res.data.data.order.cinema.name
      this.MovieName = res.data.data.order.movie.name
      this.startTime = res.data.data.order.show.startTime
      this.endTime = res.data.data.order.show.endTime
      this.MovieLan = res.data.data.order.show.language
      this.CinemaSeat = res.data.data.order.seat.hallName
      this.OrderNumber = res.data.data.order.orderId
      this.OrderPrice = res.data.data.order.price
      this.CinemaAdress = res.data.data.order.cinema.address
      this.orderId = res.data.data.order.orderId
    },
    getDate(start, end) {
      const oStart = new Date(start)
      const oEnd = new Date(end)
      return `${oStart.getFullYear()}年${
        oStart.getMonth() + 1
      }月${oStart.getDate()}日 ${oStart.getHours()}:${String(
        oStart.getMinutes()
      ).padStart(2, 0)}-${oEnd.getHours()}:${String(oEnd.getMinutes()).padStart(
        2,
        0
      )} `
      /* const start = new Date(+start)
      const end = new Date(+end)
      return `${start.getFullYear()}年${
        start.getMonth() + 1
      }月${start.getDate()}日 ${start.getHours()}:${String(
        start.getMinutes()
      ).padStart(2, 0)} ` */
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail {
  background: #efeff0;
  min-height: 100%;
  .order-card {
    padding: 14px 16px;
    .card-box {
      background: #fff;
      border-radius: 5px;
      border: #ccc;
      .van-cell {
        border-bottom: 1px solid #ccc;
        color: #747674;
      }
      .card-detail {
        padding-left: 15px;
        font-size: 15px;
        padding-bottom: 24px;
        border-bottom: 1px dashed #ccc;
        position: relative;
        .movie-name {
          color: #000;
          font-weight: bold;
          font-size: 22px;
          line-height: 50px;
        }
        .movie-tl {
          color: #f44c40;
        }
        .cinema-seat {
          color: #666666;
          line-height: 22px;
        }
        .circle {
          position: absolute;
          z-index: 999;
          background: #efeff0;
          width: 20px;
          height: 20px;
          border-radius: 100%;
        }
        .left-circle {
          left: -10px;
          bottom: -10px;
        }
        .right-circle {
          right: -10px;
          bottom: -10px;
        }
      }
      .ewm-box {
        padding: 10px 0;
        display: flex;
        justify-content: center;
        img {
          margin: 0 auto;
          width: 200px;
        }
      }
    }
  }
  .order-middle {
    background: #fff;
    padding: 15px 18px;
    margin-bottom: 14px;
    .om {
      line-height: 22px;
      color: #666666;
      font-size: 14px;
    }
  }
  .cinema-bottom {
    background: #fff;
    padding: 15px 0;
    display: flex;
    align-items: center;
    .cinema-place {
      padding-left: 16px;
      border-right: 1px solid #ccc;
      width: 78%;
      .sandian {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .cinema-name {
        font-size: 20px;
      }
      .cinema-address {
        color: #9e9f9e;
        font-size: 14px;
        line-height: 28px;
      }
    }
    .icon-phone {
      flex: 1;
      text-align: center;
      font-size: 24px;
      color: skyblue;
    }
  }
}
</style>
